<template>
	<view>
		<swiper class="syswiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular="true">
			<swiper-item>
				<image src="../../static/image/3.jpg" mode=""></image>
			</swiper-item>
			<swiper-item >
			<image src="../../static/image/4.jpg" mode=""></image>
			</swiper-item>
			<swiper-item >
			<image src="../../static/image/5.jpg" mode=""></image>
			</swiper-item>
			<swiper-item >
		     <image src="../../static/image/9.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="tlt"> 月度用水量</view>
	
		<picker mode="date" fields="month" :value="anzhuang" start="2015-09-01" end="2025-09-01" @change="bindDateChange">
			<input class="weui-input" type="number" :value="anzhuang" placeholder="2022-03" />
		</picker>
		<view class="charts-box">
		  <qiun-data-charts
		    type="column"
			:opts="{color:['#5C88A6', '#ADDFC8']}"
		    :chartData="chartsDataMix1"
		    background="none"
		  />
		</view>
		<view class="tlt"> 功能列表</view>
		<view class="syystem">
			<view v-for="(item,index) in sysitem" :key="index" @click="tzfn(item.url)">
				<view :class="item.class"></view>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {ref,reactive,toRefs,onMounted} from 'vue'
	import http from '../../utils/http.js'
	export default {
		setup(){
			let data=reactive({
				chartsDataMix1:{
				            "categories": [
				        "地下水",
				        "地表水",
				        "自来水",
				        
				            ],
				            "series": [
				                  {
				            "name": "计划用水量",
				            "data": [
				                0,
				                0,
				                0,   
				            ]
				        },
				        {
				            "name": "实际用水量",
				            "data": [
				                0,
				                0,
				                0,
				            ]
				        }
				    ]
				},
				
				sysitem:[
				{class:'t-icon t-icon-renjunrishenghuoyongshuiliang30',text:'水表管理',url:'/pages/shuibiao/shuibiaoguanli/shuibiaoguanli'},
				{class:'t-icon t-icon-yongshuigongsi',text:'消息提醒',url:'/pages/shuibiao/xiaoxitixing/xiaoxitixing'}, 
				{class:'t-icon t-icon-shoufeiguanli',text:'水量统计',url:'/pages/shuibiao/shuiliangtongji/shuiliangtongji'},
				{class:'t-icon t-icon-richangjiancha',text:'异议申请',url:'/pages/shuibiao/yiyishenqing/yiyishenqing'}
				],
				anzhuang:'',
				bindDateChange: function(e) {
									console.log('picker发送选择改变，携带值为', e.detail.value)
									data.anzhuang = e.detail.value
									data.a(data.anzhuang)
								},
				tzfn:(ev)=>{
					uni.navigateTo({
						url:ev
					})
				},
				a(rr){
					 data.chartsDataMix1.series=[{
				            "name": "计划用水量",
				            "data": [
				                0,
				                0,
				                0,   
				            ]
				        },
				        {
				            "name": "实际用水量",
				            "data": [
				                0,
				                0,
				                0,
				            ]
				        }]
					http({
						url: "/miniwatermeter/getyiyiyue",
						method: "post",
						data:{ yue: rr	}			
					}).then((res) => {
            
					for( let i of res.data.data){
						switch(i.sb_yongshuileixing){
							case '地下水':
							  data.chartsDataMix1.series[0].data[0]+=Number( i.sb_yuanbiaodushu) ;
							  data.chartsDataMix1.series[1].data[0]+=Number( i.sb_xingbiaodushu) ;break;
							case "地表水":data.chartsDataMix1.series[0].data[1]+= Number(i.sb_yuanbiaodushu );
							data.chartsDataMix1.series[1].data[1]+= Number(i.sb_xingbiaodushu );break;
							case "自来水":data.chartsDataMix1.series[0].data[2]+=Number(i.sb_yuanbiaodushu )
							data.chartsDataMix1.series[1].data[2]+= Number(i.sb_xingbiaodushu);break;
						}
					}
						
					 })
				}
			})
			onMounted(() => {
			  data.a('2022-03')
			})
			return  {...toRefs(data)  };
		}
		,
		onLoad(){
			
		}
	}
</script>

<style lang="scss">
	@import url("~@/static/xzafont/iconfont/iconfont.css");
	.syswiper {
		width: 750rpx;
		height: 420rpx;
	}
.tlt{
	padding: 20rpx;
	font-size:35rpx;
	border-bottom: 1px solid #b6b6b6;
}
	.syystem {
		display: flex;
		flex-wrap: wrap;
		&>view {
			width: 250rpx;
			color: #666666;
			height: 203rpx;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: 1px solid #E4E4E4;
		}
	}
	image{
			width: 750rpx;
	}
	.weui-input{
	        	margin: 30rpx;
				width: 200rpx;
			border: 1rpx solid #E4E4E4;
	}
</style>
